<style scoped lang="scss">
.btn{
  height: 84rpx;
  line-height: 84rpx;
  background: #577BED;
  border-radius: 45rpx;
  margin-left: 34rpx;
  margin-right: 34rpx;
  font-size: 32rpx;
  color: #FFFFFF;
  text-align: center;
  margin-top: 80rpx;
  margin-bottom: 40rpx;
}

.card-inp{
  height: 144rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx;

  input{
    height: 84rpx;
    line-height: 84rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    background: #F6F6F6;
    border-radius: 20rpx;
  }
}

.card-info{
  padding: 30rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 20rpx;
  & > view{
    margin-bottom: 42rpx;

    &:last-child{
      margin-bottom: 0;
    }

    & > view{
      &:nth-child(1){
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin-bottom: 26rpx;

        text{
          width: 38rpx;
          height: 38rpx;
          color: #fff;
          font-size: 24rpx;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-right: 12rpx;
          border-radius: 50%;
        }

      }
      &:nth-child(2){
        height: 84rpx;
        line-height: 84rpx;
        background: #F6F6F6;
        border-radius: 20rpx;
        padding-left: 32rpx;
        padding-right: 32rpx;
      }
    }


  }
}
</style>

<template>
  <view class="page">
    <view class="s-head">
      <h-head :back="true">
        卡密兑换
      </h-head>
    </view>

    <view class="s-body">
      <scroll-view class="maxh" :scroll-y="true">

        <template v-if="!info.id">
          <view class="card-inp">
            <input type="text" v-model="code" @keyup.enter.native="send" placeholder="请输入卡密">
          </view>
          <view class="btn" @click="send">立即兑换</view>
        </template>

        <view class="card-info" v-if="info.id">

          <view>
            <view>
              <text class="iconfont icon-mima" style="background: #567AED;"></text>卡密
            </view>
            <view>
              {{ info.code }}
            </view>
          </view>
          <view>
            <view>
              <text class="iconfont icon-quanxianshezhi" style="background: #FAB62E;"></text>类型
            </view>
            <view>
              {{ info.type === 1 ? '对话' : info.type === 2 ? '绘画' : 'VIP'}}
            </view>
          </view>
          <view>
            <view>
              <text class="iconfont icon-tishi" style="background: #5AB6A8;"></text>{{info.type === 1 || info.type === 2 ? '条数' : '天数'}}
            </view>
            <view>
              {{info.val}}
            </view>
          </view>

        </view>

      </scroll-view>
    </view>
  </view>
</template>

<script>

export default {
  components: {
  },
  onShow() {
  },
  onLoad(option) {

  },
  data() {
    return {
      code: '',
      info: {}
    };
  },
  methods: {
    send() {
      if(!this.code){
        return this.utils.toast('请输入卡密')
      }
      this.httpClient.post({
        url: this.APIPath.card.activate,
        data: {
          code: this.code
        }
      }).then(res => {
        this.utils.toast('激活成功')
        this.info = res.data
      }, err => {
      })
    }

  },
};
</script>

